<!DOCTYPE html>
<meta charset=utf-8>
<title>input type=file and change events</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<input type=file multiple>
<script>
async_test(t => {
  const input = document.querySelector('input');
  input.addEventListener('change', t.step_func_done(e => {
    assert_equals(
      input.files.length, 2,
      'event should only be seen for drop, not for assignment');
  }));

  // Manually assign a FileList instance, with 3 files.
  // This should not produce an event.
  const dt = new DataTransfer();
  dt.items.add(new File([], 'file1.txt'));
  dt.items.add(new File([], 'file2.txt'));
  dt.items.add(new File([], 'file3.txt'));
  input.files = dt.files;

  // Now simulate a drag, with 2 files.
  // This should produce an event.
  eventSender.beginDragWithFiles(['fileA.txt', 'fileB.txt']);
  const rect = input.getBoundingClientRect();
  eventSender.mouseMoveTo(rect.left + rect.width / 2, rect.top + rect.height / 2);
  eventSender.mouseUp();

}, 'expected change events');
</script>
